<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>页面存储</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
    </style>
</head>
<body>
    <button>存储用户名</button>
    <button>获取用户名</button>
    <button>删除用户名</button>
    <button>清空</button>
    <button>获取所有存储的值</button>
    
    <script type="text/javascript">
        /*
            localStorage 本地存储，能存储更多的内容，操作简单
                + 存储有效期（生命周期）：除非人为删除，一直存在
                + 共享范围：同源页面共享

            sessionStorage 页面存储，能存储更多的内容，操作简单
                + 存储有效期：页面存活时间
                + 共享范围：单页面

            常见属性和方法：setItem(key,value)   getItem(key)  removeItem(key)
                clear()清空  key(index) 根据下标获取key名 length 存储长度

            存储一个引用类型值  object/array，在存储时会将引用类型转换为字符串存储
            要保持类型 -- JSON（对象的字符串表示）  JSON.stringify(obj)  JSON.parse(JSON)

            存储内容同名替换
        */

        var btns = document.querySelectorAll("button");

        
        btns[0].onclick = function() {
            // 存储
            localStorage.setItem("uname", "李白");
            sessionStorage.setItem("uname", "苏轼");

            localStorage.setItem("object", JSON.stringify({ age: 35 }));
            localStorage.setItem("array", JSON.stringify([1,2,3,4,5]));
        }

        
        btns[1].onclick = function() {
            // 获取
            console.log("local 获取", localStorage.getItem("uname"));
            console.log("session 获取", sessionStorage.getItem("uname"));

            console.log(JSON.parse(localStorage.getItem("object")));
            console.log(JSON.parse(localStorage.getItem("array")));
        }

        btns[2].onclick = function (){
            // 删除
            localStorage.removeItem("uname");
            sessionStorage.removeItem("uname");
        }

        btns[3].onclick = function (){
            // 清空
            localStorage.clear();
        }

        btns[4].onclick = function (){
            // 获取所有存储的值
            for(var i = 0; i < localStorage.length; i ++){
                var key = localStorage.key(i);
                console.log("存储的key：", key, " 对应的值：", localStorage.getItem(key));
            }
        }

        
    </script>
</body>
</html>